<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>生命周期</title>
	</head>
	<body>
		<div id="app" >
			<!-- 1.Vue对象的生命周期的函数,可以单独的调用 
				 2.生命周期的函数名称时固定的,不可以更改-->
			用户名:<input type="text" v-model.lazy="name"/>
			<button @click="destroyed">销毁</button>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app =new Vue({
				el:"#app",
				data:{
					name:''
				},
				methods:{
					destroyed(){
						//手动销毁 $ :vue中的对象API进行调用
						this.$destroy()
					}
					
				},
				beforeCreate() {
					console.log("初始化之后调用-beforeCreate")
				},
				created() {
					console.log("在实例创建完成后立即调用-created")
				},
				beforeMount() {
					console.log("在挂载之前被调用-beforeMount")
				},
				mounted() {
					console.log("页面加载完成-mounted")
				},
				beforeUpdate() {
					console.log("数据更新时调用-beforeUpdate")
				},
				updated() {
					console.log("数据修改之后调用-updated")
				},
				beforeDestroy() {
					console.log("Vue对象销毁前调用-beforeDestroy")
				},
				destroyed() {
					console.log("实例销毁后调用-destroyed")
				}
			})
		</script>
	</body>
</html>
